<template>
  <ul>
    <li>
      <router-link to="/" v-slot="{ navigate }" custom>
        <h2 @click="goToHome" class="titleColor">首页</h2>
      </router-link>
      <!-- <navLink to="/"></navLink> -->
    </li>
    <li>
      <!-- <router-link to="/todomvc">待辦列表</router-link> -->

      <navLink to="/todomvc"></navLink>
    </li>
    <li>
      <!-- <router-link to="/about">about</router-link> -->
      <navLink to="/about"></navLink>
    </li>

    <li>
      <!-- <router-link to="/about">about</router-link> -->
      <navLink to="/tsComponent"></navLink>
    </li>

    <router-view v-slot="{ Component }">
      <!-- 缓存页面 -->
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </ul>
</template>
<script>
import navLink from "./NavLink.vue";
import { useRouter } from "vue-router";
export default {
  components: {
    navLink,
  },
  setup() {
    const router = useRouter();
    function goToHome() {
      router.push("/");
    }
    return {
      goToHome,
    };
  },
};
</script>

<style scoped>
li {
  list-style: none;
}
.titleColor {
  color: green;
}
</style>